<template>
  <ag-popup
    class="draw-panel"
    :title="this.drawPanelState == 'add' ? '绘制漫游' : '编辑绘制漫游'"
    v-model="visible"
    @onCancel="onCancel"
  >
    <el-form
      class="drawPanelClass"
      :model="drawForm"
      :rules="rules"
      ref="drawForm"
      label-position="right"
      label-width="100px"
    >
      <el-col :span="24" class="title">
        <h5>设置漫游参数</h5>
      </el-col>
      <el-form-item label="名称" prop="name" class="draw-form-item">
        <el-input size="small" v-model="drawForm.name" style="width: 222px" />
      </el-form-item>
      <el-form-item label="漫游分组" prop="classify" class="draw-form-item">
        <el-select size="small" v-model="drawForm.classify">
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :value="item.id"
            :label="item.title"
          >
            {{ item.title }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="漫游模型" class="draw-form-item">
        <el-select
          size="small"
          v-model="drawForm.modelType"
          @change="modelTypeChange"
          placeholder="请选择"
          :disabled="isContinue"
        >
          <el-option
            v-for="item in modelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="飞行高度(m)"
        class="draw-form-item"
        v-show="'aircraft,balloon'.indexOf(drawForm.modelType) > -1"
      >
        <el-input-number
          size="small"
          :min="1"
          v-model="drawForm.flyheight"
          @change="flyHeightChange"
          :disabled="isContinue"
        />
      </el-form-item>
      <el-form-item label="速度(m/s)" class="draw-form-item">
        <el-input-number
          size="small"
          :min="1"
          v-model="drawForm.speed"
          @change="speedChange"
          :disabled="isContinue"
        />
      </el-form-item>
      <el-form-item label="视角" class="draw-form-item">
        <el-select
          size="small"
          v-model="drawForm.visualAngleType"
          @change="visualAngleTypeChange"
          :disabled="isContinue"
        >
          <el-option value="empty" label="自由视角">自由视角</el-option>
          <el-option value="lockFirst" label="第一视角">第一视角</el-option>
          <el-option value="lockGod" label="上帝视角">上帝视角</el-option>
          <!-- <el-option value="follow">跟随视角</el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item
        label="视角角度(°)"
        class="draw-form-item"
        v-show="drawForm.visualAngleType == 'lockFirst'"
      >
        <el-input-number
          size="small"
          v-model="drawForm.angle"
          :min="0"
          :max="89.99"
          @change="angleChange"
          :disabled="isContinue"
        />
      </el-form-item>
      <el-form-item
        label="视角距离(m)"
        class="draw-form-item"
        v-show="drawForm.visualAngleType != 'empty'"
      >
        <el-input-number
          size="small"
          v-model="drawForm.width"
          :min="1"
          @change="widthChange"
          :disabled="isContinue"
        />
        <span
          class="txt-warning"
          v-show="drawForm.visualAngleType == 'lockFirst'"
          >模型范围内取值,大于0</span
        >
      </el-form-item>
      <el-form-item label="显示路线" class="draw-form-item">
        <el-radio-group
          v-model="drawForm.isShowRoute"
          @change="showRouteChange"
        >
          <el-radio :label="true" :disabled="isContinue">是</el-radio>
          <el-radio :label="false" :disabled="isContinue">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="贝塞尔曲线" class="draw-form-item">
        <el-radio-group v-model="drawForm.isBezier" @change="showBezier">
          <el-radio :label="true" :disabled="isContinue">是</el-radio>
          <el-radio :label="false" :disabled="isContinue">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-col class="title">
        <h5>绘制漫游线路</h5>
      </el-col>
      <p>
        <el-button
          size="small"
          class="draw-btn"
          type="primary"
          @click.stop="onDraw"
        >
          {{ changeState ? "重新绘制" : "开始绘制" }}
        </el-button>
      </p>
      <el-col class="title">
        <h5>漫游检查保存</h5>
      </el-col>
      <p>
        <el-button
          size="small"
          type="primary"
          class="draw-btn"
          @click="onPauseOrContinue"
          id="btnRoad"
        >
          开始漫游
        </el-button>
        <el-button size="small" @click="onSubmitDraw" class="draw-btn saveBtn"
          >保存
        </el-button>
      </p>
    </el-form>
  </ag-popup>
</template>
<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";
import imageDataApi from "@/views/js/api/imageDataApi";
import canvas2Image from "@/views/js/extension/canvas2Image.js";
import modelList from "../js/model.json";
import Roaming from "../js/roaming";
import cameraUpdater from "../js/cameraUpdater";
import * as turf from "@turf/turf";

var coordinate = null;
var agMath = null;
var agCamera = null;
var AgPolyline = null;
let viewer = null;
let draw = new agcim.interactive.draw(CIM.viewer);
let saveDrawObj = null;
let bezierLineEntity = null;
let roam = null;
let agFeatureLayer = null;
export default {
  name: "",
  props: {
    groupList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    "ag-popup": AgPopup,
  },
  data() {
    return {
      //弹窗显示
      visible: false,
      isContinue: false,
      changeState: false,
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        classify: [
          {
            required: true,
            message: "请选择漫游分组",
            trigger: "change",
          },
        ],
      },
      //模型列表
      modelList: modelList,
      //添加 编辑状态
      drawPanelState: "add",
      drawForm: {
        name: "",
        code: "",
        width: 2,
        height: 100,
        modelType: "empty",
        roamType: "draw",
        flyheight: 1,
        visualAngleType: "lockFirst",
        isShowRoute: true,
        isBezier: false,
        speed: 50,
        sumDistance: 0,
        sumTime: 0,
        entities: null,
        angle: 0,
        isClampToGround: true,
      },
      drawClickFlag: true,
      drawPosition: [],
    };
  },
  mounted() {
    viewer = CIM.viewer;
    coordinate = agcim.maths.coordinate;
    agMath = agcim.maths.math;
    agCamera = agcim.camera.camera;
    AgPolyline = agcim.geometry.Polyline;
    // draw = new agcim.interactive.draw(viewer);
    agFeatureLayer = new agcim.layer.FeatureLayer(viewer);
  },
  methods: {
    onShow(item) {
      viewer.scene.requestRenderMode = false;
      this.visible = true;
      this.$refs["drawForm"].resetFields();
      if (!(item instanceof Object)) {
        this.drawPanelState = "add";
        this.drawForm = {
          name: "",
          classify: item,
          code: "",
          width: 2,
          height: 100,
          modelType: "empty",
          roamType: "draw",
          flyheight: 1,
          visualAngleType: "lockFirst",
          isShowRoute: true,
          isBezier: false,
          speed: 50,
          sumDistance: 0,
          sumTime: 0,
          entities: null,
          angle: 0,
          positions: "",
          isClampToGround: true,
        };
      } else {
        this.drawPanelState = "edit";
        this.id = item.id;
        this.drawForm = JSON.parse(JSON.stringify(item.json));
        this.changeState = true;
        this.setFollowed(this.drawForm.visualAngleType);
        this.creatRoaming(item.json.positions);
        this.stopRoam();
        this.primitivePosition = item.json.primitivePosition;
        this.bezierPosition = item.json.bezierPosition;
      }
    },
    onCancel() {
      this.visible = false;
      this.removeEndRoaming();
      this.changeState = false;
      this.stopRoam();
      this.isContinue = false;
      this.drawClickFlag = true;
      if (document.getElementById("btnRoad")){
        document.getElementById("btnRoad").innerText = "开始漫游";
      }
      if (draw) {
        draw.removeAll();
        draw.dispose();
      }
      agFeatureLayer.removeAll();
      if (roam) {
        roam.EndRoaming();
        roam = undefined;
      }
      saveDrawObj = null;
      this.bezierPosition = null;
      if (bezierLineEntity) {
        CIM.viewer.entities.remove(bezierLineEntity.agPolyline);
      }
      setTimeout(() => {
        viewer.scene.requestRenderMode = true;
      }, 500);
    },
    // 开始 或 重新绘制
    onDraw() {
      if (!this.drawClickFlag) return;
      this.$message.info(
        "已开启漫游路径绘制，左键双击结束绘制，右键单击取消绘制"
      );
      CIM.viewer.scene.requestRenderMode = false;
      this.drawClickFlag = false;
      if (bezierLineEntity) {
        CIM.viewer.entities.remove(bezierLineEntity.agPolyline);
        bezierLineEntity = null;
      }
      if(this.bezierPosition){
        this.bezierPosition = null;
      }
      if (!this.changeState) {
        this.drawLineStringAndCallBack();
      } else {
        this.removeEndRoaming();
        this.stopRoam();
        if (draw) {
          draw.removeAll();
        }
        this.drawLineStringAndCallBack();
      }
      this.drawForm.positions = "";
    },
    getSpaceDistance(p1, p2) {
      var distance = 0;
      var point1cartographic = Cesium.Cartographic.fromCartesian(p1);
      var point2cartographic = Cesium.Cartographic.fromCartesian(p2);
      /**根据经纬度计算出距离**/
      var geodesic = new Cesium.EllipsoidGeodesic();
      geodesic.setEndPoints(point1cartographic, point2cartographic);
      var s = geodesic.surfaceDistance;
      //返回两点之间的距离
      s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
      distance = distance + s;
      return distance.toFixed(2);
    },
    // 绘制线段及回调
    drawLineStringAndCallBack() {
      var vm = this;
      draw = new agcim.interactive.draw(viewer);
      draw
          .drawMultiPolyline(
              {
                clampToGround: true,
              },
              false
          )
          .then(
              async (result) => {
                vm.drawClickFlag = true;
                let positionList;
                saveDrawObj = result;
                let count = 300;
                let terrainProvider = viewer.terrainProvider;
                if (terrainProvider._layers && terrainProvider._layers.length > 0 && !this.drawForm.isBezier) {
                  let positionArr = [];
                  this.minDistance = null;
                  for (var i = 1;i < result.positions.length - 1;i++){
                    var d = this.getSpaceDistance(result.positions[i - 1], result.positions[i]);
                    if (!this.minDistance){
                      this.minDistance = d;
                    }else if(this.minDistance > d){
                      this.minDistance = d
                    }
                  }
                  if (this.minDistance > 20){
                    positionArr = this.addPointWithLerp(result.positions, count);
                  }else {
                    positionArr = this.addPointWithLerp(result.positions, 0);
                  }
                  result.positions = positionArr;
                  await agcim.layer.terrainHelper
                      .getTerrainHeights(CIM.viewer, result.positions)
                      .then((res) => {
                        result.positions = res;
                        let resTemp = [];
                        resTemp.push(res[0]);
                        var flag = null; // 0递增 1递减
                        var realTimeFlag = 0;
                        var flagIndex = [0];
                        if (this.minDistance > 20){
                          for (var i = 0; i < res.length - 1; i++) {
                            var z = agcim.maths.coordinate.Cartesian3_to_WGS84(res[i + 1]).alt - agcim.maths.coordinate.Cartesian3_to_WGS84(res[i]).alt;
                            if (z > 0) {
                              realTimeFlag = 0;
                            } else {
                              realTimeFlag = 1;
                            }
                            if (flag === null) {
                              flag = realTimeFlag;
                            }
                            if (flag != realTimeFlag) {
                              if (realTimeFlag === 1) {
                                var quantity = i - flagIndex[flagIndex.length - 1];
                                var a = flagIndex[flagIndex.length - 1] + Math.round(quantity / 8);
                                var c = flagIndex[flagIndex.length - 1] + Math.round(quantity / 4);
                                resTemp.push(res[a]);
                                resTemp.push(res[c]);
                              }
                              // if (realTimeFlag === 1) {
                              var quantity = i - flagIndex[flagIndex.length - 1];
                              // var a = flagIndex[flagIndex.length - 1] + Math.round(quantity / 4);
                              var c = flagIndex[flagIndex.length - 1] + Math.round(quantity / 2);
                              // resTemp.push(res[a]);
                              resTemp.push(res[c]);
                              // }
                              resTemp.push(res[i]);
                              flagIndex.push(i);
                              flag = realTimeFlag;
                            }
                          }
                          resTemp.push(res[res.length - 1]);
                          result.positions = resTemp;
                        }
                      })
                }
                let tempArr = [];
                if(!result) return
                for (var item of result.positions){
                  var temp = agcim.maths.coordinate.Cartesian3_to_WGS84(item);
                  temp.alt += 10;
                  item = agcim.maths.coordinate.WGS84_to_Cartesian3(temp);
                  tempArr.push(item);
                }
                result.positions = tempArr;
                this.primitivePosition = result.positions;
                this.drawPosition = result.positions;
                result.geographPosition.splice(
                    result.geographPosition.length - 1,
                    1
                );
                this.bezierPosition = result.geographPosition;
                if (vm.drawForm.isBezier) {
                  await vm.showBezier("needReturn");
                  positionList = vm.primitivePosition;
                } else {
                  positionList = result.positions;
                }
                var positions = positionList;
                let genimg = canvas2Image.capturePng(viewer, "318", null, 0.8);
                // 清理draw类生成的entity
                for (var polyline of result.collectAgPolyline) {
                  result.layer.removeEntity(polyline.entity);
                }
                vm.drawForm.code = genimg.src;
                vm.drawForm.positions = positions;
                vm.creatRoaming(positions);
                this.changeState = true;
              },
              (error) => {
                vm.drawClickFlag = true;
                //错误的情况一般是没有点中任何东西
                console.log(error);
              }
          );
    },
    // 点间插值
    addPointWithLerp(data, count) {
      let positionArr = [];
      if (count >= 1){
        for (var index = 0; index < data.length - 2; index++) {
          for (let i = 1; i < count; i++) {
            let cart = Cesium.Cartesian3.lerp(data[index], data[index + 1], i / count, new Cesium.Cartesian3());
            positionArr.push(cart);
          }
        }
        return positionArr
      } else {
        return data
      }
    },
    // 修改模型类型
    modelTypeChange(value) {
      this.drawForm.modelType = value;
      this.getModelUrl(value);
      if (
        (value !== "aircraft" || value !== "balloon") &&
        this.drawForm.flyheight > 1
      ) {
        let model = this.modelList.filter((item) => {
          return item.value === value;
        })[0];
        this.drawForm.flyheight = model.height || 0;
        this.creatRoaming(this.drawForm.positions);
      } else {
        let model = this.modelList.filter((item) => {
          return item.value === value;
        })[0];
        this.drawForm.flyheight = model.height || 0;
        if (roam) {
          roam.ChangeRoamingFlyHeight(this.drawForm.flyheight);
          roam.ChangeEntityModel(value, this.modelUrl, this.modelScale);
        }
      }
    },
    getModelUrl(value) {
      let md = this.modelList.find((item) => {
        return item.value == value;
      });
      this.modelUrl = md.src;
      this.modelScale = 1;
      if (md.scale) this.modelScale = md.scale;
    },
    // 修改视角类型
    visualAngleTypeChange(value) {
      this.drawForm.visualAngleType = value;
      if (value == "lockFirst") {
        this.drawForm.angle = 0;
        this.drawForm.width = 2;
        this.angleChange(this.drawForm.angle);
        this.widthChange(this.drawForm.width);
      } else if (value == "lockGod") {
        this.drawForm.angle = 45;
        this.drawForm.width = 100;
        this.angleChange(this.drawForm.angle);
        this.widthChange(this.drawForm.width);
      }
    },
    // 修改飞行速度
    speedChange(value) {
      roam.ChangeRoamingSpeed(value);
    },
    // 修改飞行高度
    flyHeightChange(value) {
      roam.EndRoaming();
      roam.ChangeRoamingFlyHeight(value);
      // self.startRoam();
    },
    //视角角度
    angleChange(value) {
      cameraUpdater.changeAngle(value);
      this.drawForm.angle = value;
      roam.changeAngle(value);
    },
    // 修改视角距离
    widthChange(value) {
      cameraUpdater.changeWidth(value);
      this.drawForm.width = value;
      roam.changeWidth(value);
    },
    // 开启贝塞尔曲线
    async showBezier(needReturn) {
      let resolution = 60 * 1000, // 点与点之间的时间以毫秒为单位
        sharpness = 0.85 * 2, // 控制贝塞尔曲线的曲率
        positionList = [];
        if (roam?.entity?.polyline) {
          roam.entity.polyline.show = false;
        }
      if (this.drawForm.isBezier) {
        draw.removeAll();
        let result = saveDrawObj;
        agFeatureLayer.removeAll();
        let tempList = result ? result.geographPosition : this.bezierPosition;
        if (!tempList) {
          return;
        }
        let line = turf.lineString(
          tempList.map((item) => [item.lat, item.lng])
        );
        let defaultOptions = {
          material: Cesium.Color.fromCssColorString("#FFA200").withAlpha(0.9),
          width: 10,
          pointHeight: 0,
        };
        //计算出新的参数
        let newOptions = Object.assign(defaultOptions, {});
        newOptions.positions = new Cesium.CallbackProperty(
          () => positionList,
          false
        );
        positionList = turf
          .bezierSpline(line, {
            resolution,
            sharpness,
          })
          .geometry.coordinates.map((item) => {
            return coordinate.cartographicToCartesian3({
              lat: item[0],
              lng: item[1],
              height: newOptions.height,
            });
          });

        //删除本来的线条
        let agPolyline = new AgPolyline("agPolyline", positionList, {
          clampToGround: true,
        });
        if (result) {
          result.collectAgPolyline.forEach((item) => {
            CIM.viewer.entities.remove(item.agPolyline);
          });
          agPolyline.addToLayer(draw.agFeatureLayer); //添加贝塞尔曲线
          bezierLineEntity = agPolyline;
        } else {
          agPolyline.addToLayer(agFeatureLayer); //添加贝塞尔曲线
          bezierLineEntity = agPolyline;
        }
        if (!this.drawForm.isShowRoute) {
          bezierLineEntity.agPolyline.show = false;
        } else {
          bezierLineEntity.agPolyline.show = true;
        }
      } else {
        //还原折线
        draw.removeAll();
        if (roam){
          roam.entity.polyline.show = false;
        }
        if (!saveDrawObj) {
          agFeatureLayer.removeAll();
          var agPolyline = new AgPolyline(
              'agPolyline',
              this.primitivePosition,
              {
                clampToGround: true,
              }
          );
          agPolyline.addToLayer(agFeatureLayer);
        }
        if (bezierLineEntity) {
          CIM.viewer.entities.remove(bezierLineEntity.agPolyline);
          bezierLineEntity = null;
        }
        if (saveDrawObj && (this.drawForm.positions != "" && this.drawForm.positions != null && this.drawForm.positions != undefined)) {
          saveDrawObj.collectAgPolyline[0].addToLayer(saveDrawObj.layer);
          saveDrawObj.collectAgPolyline[0].agPolyline.show =
          this.drawForm.isShowRoute;
        } else {
        }
      }
      let terrainProvider = viewer.terrainProvider;
      if (terrainProvider._layers && terrainProvider._layers.length > 0) {
        await agcim.layer.terrainHelper
            .getTerrainHeights(viewer, positionList)
            .then((res) => {
              positionList = res;
              let tempArr = [];
              for (var item of positionList){
                var temp = agcim.maths.coordinate.Cartesian3_to_WGS84(item);
                temp.alt += 10;
                item = agcim.maths.coordinate.WGS84_to_Cartesian3(temp);
                tempArr.push(item);
              }
              positionList = tempArr;
            })
      }
      var positions = positionList.length
        ? positionList
        : this.drawPosition;
      this.primitivePosition = positions;
      let genimg = canvas2Image.capturePng(viewer, "318", null, 0.8);
      this.drawForm.code = genimg.src;
      this.drawForm.positions = positions;
      this.creatRoaming(positions);
      this.setFollowed(this.drawForm.visualAngleType);
      // if(this.isContinue){
      //   this.startRoam();
      // }
    },
    // 修改显示路线
    showRouteChange(value) {
      // if (roam) {
      // roam.EndRoaming();
      // roam = undefined;
      // }
      // this.creatRoaming(this.drawForm.positions);
      roam.isPathShow = value;
      if (roam?.entity?.polyline) {
        roam.entity.polyline.show = value;
      }
      if (saveDrawObj) {
        saveDrawObj.collectAgPolyline[0].agPolyline.show = value;
      }
      if (bezierLineEntity) {
        bezierLineEntity.agPolyline.show = value;
      }
      //   draw.agFeatureLayer._entities.forEach((entity)=>{
      //     entity.show = value;
      //   })
      //     if (roam) {
      //         roam.ChangeEntityPathShow(this.drawForm.isShowRoute);
      //     }
    },
    //设置视角
    setFollowed(value) {
      if (value == "empty") {
        //无
        this.isLock = false;
        viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
      } else if (value == "lockFirst") {
        //锁定第一视角
        this.isLock = true;
        // var radian = ((2 * Math.PI) / 360) * this.drawForm.angle;
        // let x = Math.sin(radian) * this.drawForm.width;
        // let y = Math.cos(radian) * this.drawForm.width;
        // this.followedX = -x;
        // this.followedY = 0;
        // this.followedZ = y;
      } else if (value == "lockGod") {
        //上帝视角
        this.isLock = true;
        // this.followedX = -1;
        // this.followedY = 0;
        // this.followedZ = this.drawForm.height;
        this.drawForm.angle = 45;
      }
    },
    // 开始或暂停漫游
    onPauseOrContinue() {
      if (roam.entity.model){
        roam.entity.model.show = true;
      }
      if(this.drawForm.isBezier){
        roam.isPathShow = false;
      }
      if (this.drawForm.positions == "") {
        return this.$message.warning("请先进行绘制路线");
      }
      this.setFollowed(this.drawForm.visualAngleType);
      if (this.isContinue) {
        this.stopRoam();
      } else {
        this.startRoam();
      }
    },
    // 开始漫游
    startRoam() {
      this.isContinue = true;
      if (roam) {
        roam.PauseOrContinue(this.isContinue);
      }
      if (document.getElementById("btnRoad")){
        document.getElementById("btnRoad").innerText = "停止漫游";
      }
      cameraUpdater.setEnv(this, roam);
      cameraUpdater.preUpdateListener(viewer);
    },
    // 停止漫游
    stopRoam() {
      this.isContinue = false;
      if (!roam) {
        return;
      }
      roam.PauseOrContinue(this.isContinue);
      if (document.getElementById("btnRoad")) {
        document.getElementById("btnRoad").innerText = "开始漫游";
      }
      agCamera.resetCamera(viewer);
    },
    // 绘制漫游完成
    onSubmitDraw() {
      let vm = this;
      if (this.drawForm.positions == "") {
        return this.$message.warning("请先进行绘制路线");
      }

      this.$refs["drawForm"].validate((valid) => {
        if (valid) {
          let roamForm = {
            name: this.drawForm.name,
            code: this.drawForm.code,
            modelType: this.drawForm.modelType,
            roamType: "draw",
            isShowRoute: this.drawForm.isShowRoute,
            speed: this.drawForm.speed,
            sumDistance: this.drawForm.sumDistance,
            sumTime: this.drawForm.sumTime,
            width: this.drawForm.width,
            angle: this.drawForm.angle,
            flyheight: this.drawForm.flyheight,
            visualAngleType: this.drawForm.visualAngleType,
            positions: this.drawForm.positions,
            isBezier: this.drawForm.isBezier,
            primitivePosition: this.primitivePosition,
            bezierPosition: this.bezierPosition,
            classify: this.drawForm.classify,
          };
          let params = {
            imageStoreDirId: this.drawForm.classify,
            imageStoreName: this.drawForm.name,
            imageStoreInformation: JSON.stringify(roamForm),
          };
          let promise;
          if (this.drawPanelState == "add") {
            promise = imageDataApi.saveImageStore(params);
          } else {
            params.imageStoreId = this.id;
            promise = imageDataApi.updateImageStore(params);
          }
          promise.then((data) => {
            if (data.success) {
              vm.$message.success(data.message);
              vm.$emit("updateList", this.drawForm.classify);
              this.visible = false;
              agFeatureLayer.removeAll();
              saveDrawObj = null;
              vm.bezierPosition = null;
            }
            this.changeState = false;
          });
          this.isListPanel = true;
          this.isDrawPanel = false;
          this.removeEndRoaming();
          this.stopRoam();
          draw.dispose();
          this.onPauseOrContinue();
          this.isContinue = false;
          if (document.getElementById("btnRoad")){
            document.getElementById("btnRoad").innerText = "开始漫游";
          }
          if (roam) {
            roam.PauseOrContinue(false);
          }
          roam = null;
        } else {
          return this.$message.warning("请检查字段是否符合规范");
        }
      });
    },

    // 创建漫游
    creatRoaming(positions) {
      if (!positions) {
        return;
      }
      this.drawForm.sumDistance = 0;
      this.drawForm.sumTime = 0;
      var disArr = []; //点与点之间的距离
      this.drawForm.sumDistance = agMath.getDistances(positions, disArr);
      this.drawForm.sumTime = this.drawForm.sumDistance / this.drawForm.speed;

      this.getModelUrl(this.drawForm.modelType);

      if (roam) {
        roam.EndRoaming();
        roam = undefined;
      }

      if (this.drawForm.flyheight === 0) {
        this.drawForm.flyheight = 1;
      }
      roam = new Roaming(viewer, {
        time: this.drawForm.sumTime,
        entityType: this.drawForm.modelType,
        modelUrl: this.modelUrl,
        modelScale: this.modelScale,
        Lines: positions,
        flyheight: this.drawForm.flyheight,
        speed: this.drawForm.speed,
        disArr: disArr,
        isPathShow: this.drawForm.isShowRoute,
        angle: this.drawForm.angle,
        width: this.drawForm.width,
        isClampToGround: this.drawForm.isClampToGround,
      });
    },
    // 移除绘制漫游实体
    removeEndRoaming() {
      if (roam) {
        roam.EndRoaming();
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form-item.is-error {
  margin-bottom: 22px;
}

::v-deep .el-form-item__label {
  color: #fff;
}

.draw-panel {
  position: absolute;
  top: -12px;
  left: -450px;
  right: 0;
  width: 400px;
}

.title {
  margin: 14px 0px;
  margin-bottom: 10px !important;
}

.title h5 {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  margin: 0px 0px 0px 5px;
  color: #ffffff;
}

.draw-btn {
  margin: 0 10px;
}

.saveBtn {
  background: #0bc29d;
  border-radius: 4px;
  color: #fff;
  margin-left: 0;
  margin-bottom: 10px;
  border: 0;
}

.txt-warning {
  font-size: 12px;
  color: #f56c6c;
  margin-left: 5px;
}

.drawPanelClass {
  padding: 5px 15px;
}
</style>
